<template>
    <div>
        <div :style="{padding:($route.query.source == 1 ? '20px' : '0')}">
            <div class="sourceOne" v-if="$route.query.source == 1">
                业务问询回复
            </div>
            <div class="sourceOne-div" v-if="$route.query.source == 1">
                <span class="name">{{$route.query.businessType == 'businesstype_control' ? '管控措施' : '作业风险名称'}}</span>
                <span class="name-span" v-if="businessType == 'businesstype_control'" style="padding-left:10px;">{{$route.query.riskName}}</span>
                <span class="name-span" v-else style="padding-left:10px;">{{$route.query.riskName}}</span>
            </div>
            <div class="risk-div-name" v-else>
                <span>{{businessType == 'businesstype_control' ? '管控措施' : '作业风险名称'}}</span>
                <span class="name-span" v-if="businessType == 'businesstype_control'" style="padding-left:10px;">{{editModel.measures}}</span>
                <span style="padding-left:20px;" v-else>{{editModel.riskName ? editModel.riskName : editModel.riskOperationName}}</span>
            </div>
            <div v-for="(item,index) in replyList" :key="index" style="border-bottom:#E3E8EE solid 1px; padding-top:10px;">
                <div class="reply-div">
                    <span class="reply-title">问询</span>
                    <div class="reply-content">
                        <div style="height:28px;line-height: 28px;">
                            <span class="name">{{item.questionUserName}}（{{item.questionUserPost}}）</span>
                            <span class="time">{{item.questionTime}}</span>
                            <Icon type="ios-arrow-down" size="16" style="float:right;cursor: pointer;" :style="{transform:(item.down ? 'rotate(180deg)' : '')}" color="#A2A4AB" @click="item.down = !item.down,downClick(item)" />
                            <Icon v-if="$route.query.source == 1" style="float:right;cursor: pointer; padding-right:20px;" type="ios-chatbubbles" color="#2398FF" size="18" @click="replyLink(item)" />
                        </div>
                        <div class="reply-name">
                            {{item.answerUserNames}}
                        </div>
                        <div class="reply-cl">
                            {{item.questionText}}
                        </div>
                    </div>
                </div>
                <div class="reply-div" v-for="(itemEr,indexEr) in item.answerList" :key="indexEr" v-show="itemEr.down">
                    <span class="reply-title">回复</span>
                    <div class="reply-content">
                        <div style="height:28px;line-height: 28px;">
                            <span class="name">{{itemEr.answerUserName}}（{{itemEr.answerUserPost}}）</span>
                            <span class="time">{{itemEr.answerTime}}</span>
                            <Icon type="ios-arrow-down" size="16" style="float:right;cursor: pointer; padding-left:20px;" color="transparent" />
                            <Icon v-if="$route.query.source == 1" style="float:right;cursor: pointer;" type="ios-chatbubbles" color="#2398FF" size="18" @click="replyLink(itemEr)" />
                        </div>
                        <div class="reply-name">
                            @{{itemEr.questionUserName}}
                        </div>
                        <div class="reply-cl">
                            {{itemEr.answerText}}
                        </div>
                        <div class="fujian" v-for="(itPic,inPic) in itemEr.attachmentIdList" :key="inPic">
                            <span style="color:#2398FF;">{{itPic.fileNames}}</span>
                            <!-- <a target='_black' style="padding-left:40px;" :href="`https://view.officeapps.live.com/op/view.aspx?src=${fileUploadUrl}file/downFile/${itPic.fileIds}`">预览</a>
                            <a target='_black' style="padding-left:40px;" :href="`https://view.officeapps.live.com/op/view.aspx?src=http://storage.xuetangx.com/public_assets/xuetangx/PDF/1.xls`">预览</a> -->
                            <a target='_black' :href="fileUploadUrl + '/file/downFile/' + itPic.fileIds" style="padding-left:40px;">下载</a>
                        </div>
                        <div class="pic-box" v-show="itemEr.pictureIdArr.length > 0">
                            <div class="demo-upload-list" v-for="(itPic,inPic) in itemEr.pictureIdArr" :key="inPic">
                                <template>
                                    <img :src=" fileUploadUrl + '/file/downFile/' + itPic"/>
                                    <div class="demo-upload-list-cover">
                                        <Icon type="ios-eye-outline" @click.native="handleView(itPic,inPic,'pic')"></Icon>
                                    </div>
                                </template>
                            </div>
                        </div>
                        <div class="pic-box" v-show="itemEr.vedioIdsArr.length > 0">
                            <div class="demo-upload-list" v-for="(itPic,inPic) in itemEr.vedioIdsArr" :key="inPic">
                                <template>
                                    <video :src=" fileUploadUrl + '/file/downFile/' + itPic" controls="controls"></video>
                                    <div class="demo-upload-list-cover">
                                        <Icon type="ios-eye-outline" @click.native="handleView(itPic,inPic,'video')"></Icon>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Modal :title="ModalTitle" v-model="isModal" :footer-hide="true">
            <img v-show="modelType == 'pic'" :src="fileUploadUrl + '/file/downFile/' + previewYl" style="width: 100%; height: 300px;" />
            <video v-show="modelType == 'video'" :src="fileUploadUrl + '/file/downFile/' + previewYl" controls="controls" style="width: 100%; height: 300px;"></video>
        </Modal>
    </div>
</template>
<script>
export default {
    props:['businessType','editModel'],
    data(){
        return{
            replyList:[],
            fileUploadUrl: process.env.VUE_APP_FILE_SERVER_URL,
            ModalTitle:'',
            isModal:false,
            modelType:'',
            previewYl:'',
        }
    },
    mounted(){
        this.questionAnswerDetail()
    },
    methods:{
        downClick(item){
            item.answerList.forEach(e=>{
                e.down = !e.down
            })
        },
        // 图片视频放预览
         handleView(item,index,type){
            this.isModal = true
            if(type == 'pic'){
                this.previewYl = item
                this.ModalTitle = '图片预览'
                this.modelType = 'pic'
            }else if(type == 'video'){
                this.previewYl = item
                this.ModalTitle = '视频预览'
                this.modelType = 'video'
            }
        },
        // 问询回复跳转
        replyLink(item){
            let parentId = '',questionId = ''
            if(item.parentId){
                parentId = item.id
                questionId = item.questionId
            }else{
                parentId = 0
                questionId = item.id
            }
            this.$router.push({
                name:'Information-detail',
                query:{
                    questionId:questionId,
                    questionUserId:item.questionUserId,
                    parentId:parentId
                }
            })
        },
        // 根据不同的进入路径拿到不同的参数
        questionAnswerDetail(){
            let objectId = ''
            if(this.editModel && this.editModel.riskOrderId){
                objectId = this.editModel.riskOrderId
            }else{
                objectId = this.$route.query.objectId ? this.$route.query.objectId : this.$route.params.id
            }
            let parmes = {
                businessType:this.$route.query.businessType ? this.$route.query.businessType : this.businessType,
                objectId: objectId ? objectId : '',
                id:this.$route.query.source == 1 ? '' : this.$route.query.id ? this.$route.query.id : ''
            }
            this.$api.messageManage.questionAnswerDetail(parmes).then(resp=>{
                if(resp.code == 200){
                    let parmes = {
                        businessType:this.$route.query.businessType ? this.$route.query.businessType : this.businessType,
                        questionIdList:[]
                    }
                    resp.data.forEach(a=>{
                        a.down = false
                        parmes.questionIdList.push(a.id)
                        if(a.answerList != ''){
                            a.answerList.forEach(b=>{
                                b.down = false
                                b.pictureIdArr = []
                                b.vedioIdsArr = []
                                if(b.pictureIds){
                                    b.pictureIdArr = b.pictureIds.split(',')
                                }
                                if(b.vedioIds){
                                    b.vedioIdsArr = b.vedioIds.split(',')
                                }
                            })
                        } 
                    })
                    this.replyList = resp.data
                    this.$api.messageManage.updateAnswerIsRead(parmes).then(resp=>{
                        if(resp.code == 200){}
                    })
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.sourceOne{
    height: 20px;
    line-height: 20px;
    margin-bottom: 30px;
    color: #6E7E9B;
}
.sourceOne-div{
    width: 100%;
    margin-bottom:30px;
    display: table;
    .name{
        height: 36px;
        line-height: 38px;
        background-color: #DAF0FE;
        display: block;
        text-align: center;
        border-radius: 3px 0 0 3px;
        width: 100px;
        float: left;
    }
    .name-span{
        float: left;
        width: calc(100% - 111px);
        height: 36px;
        line-height: 36px;
        display: block;
        border:solid 1px #EEEEEE;
        border-left:none;
        border-radius: 0 3px 3px 0;
    }
}
.risk-div-name{
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #8894A0;
    margin-bottom: 10px;
}
.reply-div{
    display: table;
    width: 100%;
    height: auto;
    padding-bottom: 15px;
    .reply-title{
        width: 28px;
        height: 28px;
        display: block;
        border-radius: 14px;
        background-color: #2398FF;
        float: left;
        color: #fff;
        font-size: 10px;
        line-height: 28px;
        text-align: center;
    }
    .reply-content{
        width: calc(100% - 35px);
        min-height: 40px;
        float: right;
        .name{
            color: #2398FF;
            font-size: 14px;
        }
        .time{
            color: #989AA2;
            font-size: 12px;
            padding-left: 10px;
        }
        .reply-name{
            color: #222428;
            font-size: 14px;
            height: 30px;
            line-height: 30px;
            margin-top: 5px;
        }
        .reply-cl{
            color: #797979;
            font-size: 14px;
        }
        .fujian{
            padding-top: 10px;
            color: #797979;
            font-size: 14px;
            line-height: 20px;
        }
        .pic-box{
            height: 90px;
            width: 100%;
            margin-bottom: 15px;
            .demo-upload-list{
                display: block;
                width: 90px;
                height: 90px;
                text-align: center;
                line-height: 90px;
                border: 1px solid transparent;
                border-radius: 4px;
                overflow: hidden;
                background: #fff;
                position: relative;
                float:left;
                margin-top: 10px;
                margin-left:10px;
            }
            .demo-upload-list img{
                width: 100%;
                height: 100%;
                border-radius: 4px;
            }
            .demo-upload-list-cover{
                display: none;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background: rgba(0,0,0,.6);
            }
            .demo-upload-list:hover .demo-upload-list-cover{
                display: block;
            }
            .demo-upload-list-cover i{
                color: #fff;
                font-size: 20px;
                cursor: pointer;
                margin: 0 2px;
            }
        }
    }
}
</style>